<template>
	<!-- 店家推荐  -->
	<view class="recommend yunduo-bgcolor">
		<view class="recommend-item" v-for="(item,index) in shopData">
			<image :src="item.shop.cover" class="item-big"></image>
			<view class="item-small">
				<image @click="goodDetail(good.id)" v-for=" good in item.goods" :src="good.cover" class="item-little"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import shop from '@/common/api/shop/shop.js'
	export default {
		data() {
			return {
				shopData:[]
			}
		},
		mounted() {
			this.loadIndexShop();
		},
		methods:{
			//加载具体数据
			loadBanner(){
				shop.getShopDataByIds(this.shopIds)
					.then((res)=>{
						this.shopData = res.data.list
					})
			},
			//收欢迎店铺推荐
			loadIndexShop(){
				shop.getPopShop()
					.then((res) =>{
						this.shopIds = res.data.list;
						this.loadBanner();
					})
			},
			goodDetail(id){
				uni.navigateTo({
					url:'/pages/goodDetail/goodDetail?id='+id
				})
			}
		}
	}
</script>

<style>
.recommend{
	padding: 20rpx;
}
.recommend-item{
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	border: 2rpx solid #CCCCCC;
	margin: 20px 0;
	overflow: hidden;
}
.item-big{
	width: 100%;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
	height: 350rpx;
}
.item-small{
	width: 100%;
	height: 150rpx;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.item-little{
	width: 33.333%;
	height: 150rpx;
}
</style>
